<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #E8EAF6 0%, #F3E5F5 50%, #FCE4EC 100%);
            min-height: 100vh;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .menu-item {
            transition: all 0.3s;
        }

        .menu-item:active {
            transform: scale(0.98);
            background-color: #f9fafb;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .float-badge {
            animation: float 2s ease-in-out infinite;
        }

        /* 手机状态栏占位 */
        .status-bar-spacer {
            height: 28px;
            background: linear-gradient(to right, #a855f7 0%, #ec4899 50%, #f43f5e 100%);
            position: relative;
            z-index: 999;
        }

        /* 让状态栏和用户信息卡片无缝连接 */
        body {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        /* 移除容器的上边距 */
        .min-h-screen {
            margin-top: 0 !important;
        }

        /* 状态栏和用户卡片无缝衔接 */
        .status-bar-spacer+.min-h-screen>div:first-child {
            margin-top: -28px;
            padding-top: 36px;
        }
    </style>
</head>

<body>
    <!-- 手机状态栏占位 -->
    <div class="status-bar-spacer"></div>

    <div class="min-h-screen pb-24">
        <!-- 用户信息卡片 -->
        <div
            class="relative pt-2 pb-6 px-5 mb-6 bg-gradient-to-br from-purple-500 via-pink-500 to-rose-500 rounded-b-[3rem] shadow-2xl">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-white text-xl font-bold">我的</h1>
                <button class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                    <i class="fas fa-cog text-white"></i>
                </button>
            </div>

            <div class="flex items-center gap-4 mb-6">
                <div class="relative">
                    <div class="w-20 h-20 bg-white rounded-3xl flex items-center justify-center shadow-2xl">
                        <span class="text-4xl">👨‍⚕️</span>
                    </div>
                    <div class="absolute -bottom-1 -right-1 w-7 h-7 bg-green-400 border-4 border-white rounded-full">
                    </div>
                </div>
                <div class="flex-1">
                    <h2 class="text-white text-2xl font-bold mb-1">王先生</h2>
                    <p class="text-white/80 text-sm">wang@example.com</p>
                    <div class="flex items-center gap-2 mt-2">
                        <span
                            class="px-3 py-1 bg-white/20 backdrop-blur-sm text-white rounded-full text-xs font-semibold">
                            VIP会员
                        </span>
                        <span
                            class="px-3 py-1 bg-white/20 backdrop-blur-sm text-white rounded-full text-xs font-semibold">
                            已认证
                        </span>
                    </div>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="grid grid-cols-4 gap-3">
                <div class="text-center">
                    <div
                        class="w-12 h-12 mx-auto mb-2 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                        <i class="fas fa-users text-white text-lg"></i>
                    </div>
                    <div class="text-white text-lg font-bold">5</div>
                    <div class="text-white/70 text-xs">家庭成员</div>
                </div>
                <div class="text-center">
                    <div
                        class="w-12 h-12 mx-auto mb-2 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                        <i class="fas fa-pills text-white text-lg"></i>
                    </div>
                    <div class="text-white text-lg font-bold">24</div>
                    <div class="text-white/70 text-xs">总药品</div>
                </div>
                <div class="text-center">
                    <div
                        class="w-12 h-12 mx-auto mb-2 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                        <i class="fas fa-bell text-white text-lg"></i>
                    </div>
                    <div class="text-white text-lg font-bold">15</div>
                    <div class="text-white/70 text-xs">提醒数</div>
                </div>
                <div class="text-center">
                    <div
                        class="w-12 h-12 mx-auto mb-2 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                        <i class="fas fa-calendar-check text-white text-lg"></i>
                    </div>
                    <div class="text-white text-lg font-bold">89%</div>
                    <div class="text-white/70 text-xs">服药率</div>
                </div>
            </div>
        </div>

        <!-- 快捷功能 -->
        <div class="px-5 mb-6">
            <div class="glass-card rounded-3xl p-5 shadow-lg">
                <div class="flex items-center gap-2 mb-4">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-bolt text-white text-sm"></i>
                    </div>
                    <span class="font-bold text-gray-900">快捷功能</span>
                </div>

                <div class="grid grid-cols-4 gap-3">
                    <a href="medicine_management.html"
                        class="flex flex-col items-center p-3 rounded-2xl hover:bg-gray-50 transition-all">
                        <div
                            class="w-12 h-12 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl flex items-center justify-center mb-2 shadow-sm">
                            <i class="fas fa-medkit text-green-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700">药品箱</span>
                    </a>

                    <a href="reminder.html"
                        class="flex flex-col items-center p-3 rounded-2xl hover:bg-gray-50 transition-all">
                        <div
                            class="w-12 h-12 bg-gradient-to-br from-orange-100 to-amber-100 rounded-2xl flex items-center justify-center mb-2 shadow-sm">
                            <i class="fas fa-bell text-orange-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700">提醒</span>
                    </a>

                    <a href="family.html"
                        class="flex flex-col items-center p-3 rounded-2xl hover:bg-gray-50 transition-all">
                        <div
                            class="w-12 h-12 bg-gradient-to-br from-purple-100 to-pink-100 rounded-2xl flex items-center justify-center mb-2 shadow-sm">
                            <i class="fas fa-users text-purple-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700">家庭</span>
                    </a>

                    <a href="backup_restore.html"
                        class="flex flex-col items-center p-3 rounded-2xl hover:bg-gray-50 transition-all relative">
                        <div
                            class="w-12 h-12 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-2xl flex items-center justify-center mb-2 shadow-sm">
                            <i class="fas fa-cloud-upload-alt text-blue-600 text-lg"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700">备份</span>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full float-badge"></span>
                    </a>
                </div>
            </div>
        </div>

        <!-- 账户管理 -->
        <div class="px-5 mb-3">
            <div class="text-xs font-semibold text-gray-500 px-2 mb-2">账户管理</div>
        </div>

        <div class="px-5 mb-4">
            <div class="glass-card rounded-3xl overflow-hidden shadow-lg">
                <a href="#" class="menu-item flex items-center justify-between px-5 py-4 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-user text-blue-600"></i>
                        </div>
                        <span class="font-semibold text-gray-900">个人信息</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>

                <a href="#" class="menu-item flex items-center justify-between px-5 py-4 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-purple-100 to-pink-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-shield-alt text-purple-600"></i>
                        </div>
                        <span class="font-semibold text-gray-900">账户安全</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>

                <a href="#" class="menu-item flex items-center justify-between px-5 py-4">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-amber-100 to-orange-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-crown text-amber-600"></i>
                        </div>
                        <span class="font-semibold text-gray-900">VIP会员</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-xs text-orange-600 font-semibold">已开通</span>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </a>
            </div>
        </div>

        <!-- 应用设置 -->
        <div class="px-5 mb-3">
            <div class="text-xs font-semibold text-gray-500 px-2 mb-2">应用设置</div>
        </div>

        <div class="px-5 mb-4">
            <div class="glass-card rounded-3xl overflow-hidden shadow-lg">
                <a href="settings.html"
                    class="menu-item flex items-center justify-between px-5 py-4 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-green-100 to-emerald-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-cog text-green-600"></i>
                        </div>
                        <span class="font-semibold text-gray-900">系统设置</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>

                <a href="#" class="menu-item flex items-center justify-between px-5 py-4 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-pink-100 to-rose-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-bell text-pink-600"></i>
                        </div>
                        <span class="font-semibold text-gray-900">通知设置</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>

                <a href="#" class="menu-item flex items-center justify-between px-5 py-4">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-teal-100 to-cyan-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-language text-teal-600"></i>
                        </div>
                        <span class="font-semibold text-gray-900">语言</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500">中文简体</span>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </a>
            </div>
        </div>

        <!-- 支持与帮助 -->
        <div class="px-5 mb-3">
            <div class="text-xs font-semibold text-gray-500 px-2 mb-2">支持与帮助</div>
        </div>

        <div class="px-5 mb-6">
            <div class="glass-card rounded-3xl overflow-hidden shadow-lg">
                <a href="help_center.html"
                    class="menu-item flex items-center justify-between px-5 py-4 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-question-circle text-indigo-600"></i>
                        </div>
                        <span class="font-semibold text-gray-900">帮助中心</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>

                <a href="#" class="menu-item flex items-center justify-between px-5 py-4 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-blue-100 to-cyan-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-comment-dots text-blue-600"></i>
                        </div>
                        <span class="font-semibold text-gray-900">意见反馈</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>

                <a href="#" class="menu-item flex items-center justify-between px-5 py-4">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-gray-100 to-slate-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-info-circle text-gray-600"></i>
                        </div>
                        <span class="font-semibold text-gray-900">关于我们</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500">v1.0.0</span>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </a>
            </div>
        </div>

        <!-- 退出登录按钮 -->
        <div class="px-5 pb-6">
            <button
                class="w-full py-4 bg-white border-2 border-gray-200 text-gray-700 rounded-2xl font-bold text-base hover:bg-gray-50 transition-all shadow-sm">
                退出登录
            </button>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 glass-card px-5 py-3 border-t border-gray-100">
        <div class="flex items-center justify-around">
            <a href="index.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-home"></i>
                </div>
                <span class="text-xs font-medium">首页</span>
            </a>
            <a href="medicine_management.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-pills"></i>
                </div>
                <span class="text-xs font-medium">药品</span>
            </a>
            <a href="add_medicine.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-plus-circle"></i>
                </div>
                <span class="text-xs font-medium">添加</span>
            </a>
            <a href="reminder.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-bell"></i>
                </div>
                <span class="text-xs font-medium">提醒</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center gap-1 text-purple-600">
                <div
                    class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-user text-white"></i>
                </div>
                <span class="text-xs font-semibold">我的</span>
            </a>
        </div>
    </div>
</body>

</html>